<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';

import { removeLocalToken } from '@/utils/auth';
import router from '@/router';
import { useUserStore } from '@/stores/user';
import { onMounted, ref, } from 'vue';
import { getIndividualApi } from '@/apis/userlnfo';


const userStore = useUserStore()
const username = ref<string | undefined>('')
const getUserInfo = async () => {
  const res = await getIndividualApi()
  // console.log('res', res)
  userStore.setIndividual(res.data)
  username.value = useUserStore().individual?.name || useUserStore().individual?.mobile
}
onMounted(() => {
  getUserInfo()
})
/**
* 退出登录功能
*
* 此方法在用户选择登出时调用它首先调用认证服务的delToken方法
* 以删除用户的登录令牌，然后通过Vue Router的push方法将用户
* 重定向到登录页面
*/
const onLogout = () => {
  ElMessageBox.confirm('是否退出登录？', '提示', {
    confirmButtonText: '狠心推出',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 调用认证服务的delToken方法，删除用户令牌
    removeLocalToken()
    // 使用Vue Router的push方法，将用户重定向到登录页面
    router.push('/login')
    // 提示信息
    ElMessage.success({
      message: '退出成功',
      type: 'success'
    })
  }).catch(() => {
  })
}
</script>

<template>
  <!-- flex布局 -->
  <el-container class="my-layout">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <div class="logo"></div>
      <!-- el-menu 导航菜单，默认垂直排列 -->
      <el-menu :default-active="$route.path" router background-color="#023" text-color="#fff"
        active-text-color="#409EFF" style="border-right: none;">
        <!-- el-menu-item 菜单项 -->
        <el-menu-item index="/">
          <!-- el-icon-xx   element-ui 内置图标 -->
          <i class="el-icon-s-home"></i> 数据概览
        </el-menu-item>

        <el-menu-item index="/article">
          <i class="el-icon-document"></i> 内容管理
        </el-menu-item>

        <el-menu-item index="/publish">
          <i class="el-icon-s-promotion"></i> 发布文章
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- flex 容器 如果中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列 -->
    <el-container>
      <el-header>
        <span style="margin-right:20px">{{ username }}</span>

        <el-link @click="onLogout" icon="el-icon-unlock" :underline="false">退出</el-link>
      </el-header>
      <el-main>
        <!-- 路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped lang="less">
.my-layout {
  /* 1vw 视口宽度的 1% */
  /* 1vh 视口高度的 1% */
  height: 100vh;
}

.el-aside {
  background-color: #023;

  /* 设置.logo类的样式 */
  .logo {
    /* 定义logo的宽度为200px */
    width: 200px;
    /* 定义logo的高度为60px */
    height: 60px;
    /* 设置背景颜色为#023，背景图片为logo.png，图片不重复，居中显示，设置图片的宽度为160px，高度自适应 */
    background: #023 url('../../assets/images/logo.png') no-repeat center/ 160px auto;
  }
}

.el-header {
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // gap: 10px;  设置子元素间的间距
}
</style>
